<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <script type="text/javascript" src="jquery.js"></script>
     
      <script type="text/javascript">
        
         var row = 0;
         var column = 0;
         $(document).ready (updateQueues);
       
         function get (url, data, success, failure) {
            $.ajax (
               {
                  url: url,
                  data: data,
                  success: success,
                  failure: failure
               }
            );
         }
         
         function quantifySize (size) {
            
            var sizeUnits = "B";
            
            // Put the size into proper units
            while (size > 1024) {
               size /= 1024;
               
               if (sizeUnits == "B") {
                  sizeUnits = "KB";
               }
               else if (sizeUnits == "KB") {
                  sizeUnits = "MB";
               }
               else if (sizeUnits == "GB") {
                  sizeUnits = "TB";
               }
               else if (sizeUnits == "TB") {
                  sizeUnits = "PB";
               }
               else if (sizeUnits == "PB") {
                  sizeUnits = "EB";
               }
            }
            
            return size + " " + sizeUnits;
         }
       
         function updateQueues () {
            
            get (
               "/queues", "",
               
               function (xml) {
                  
                  $(xml).find("operation-queue").each(
                     function () {
                     
                        var text;
                        var id = $(this).find("device").attr("id").toLowerCase();
                        
                        // If a queue hasn't been built yet, create it from scratch
                        if ($("#" + id + "-queue").length == 0) {
                           text = formatQueue(this);
                           
                           $("#queues").append(text);
                        }
                        
                        var size = 0;
                        var contents = "";
                        
                        // Create text for each operation, and total the size
                        $(this).find("queued-operation").each(
                           function () {
                           
                              var opID = $(this).find("operation").attr("id");
                              contents += formatOperation(this);
                              size += parseInt($(this).children("size").text(), 10);
                              
                           }
                        );
                        
                        // Add units to the size and add it to the queue
                        size = quantifySize(size);
                        $("#" + id + "-queue").find(".queue-size").html(size);
                        $("#" + id + "-queue").find(".queue-contents").html(contents);
                     }
                  );
               },
               
               function (xml) {
                  alert("Unable to get Queue information");
               }
            );

            setTimeout("updateQueues();", 1000);
         }
         
         function formatQueue (xml) {
            
            // Text to put in the HTML
            var text = "";
            var contents = "";
            
            // Parameters of the queue
            var size = 0;
            var deviceName = $(xml).children("device").attr("name");
            var deviceID = $(xml).children("device").attr("id");
            
            // Build the final queue HTML
            text += "" + 
               "<div id='" + deviceID.toLowerCase() + "-queue' class='queue'>" +
                  "<div class='queue-device'>" + 
                     deviceName + 
                     "<div class='queue-size'>" + "" + "</div>" +
                  "</div>" +
                  "<div class='queue-contents'>" + 
                     "" + 
                  "</div>" + 
               "</div>";
               
            return text;
         }
         
         function formatOperation (xml) {
            
            var text = "";
            var id = $(xml).find("operation").attr("id");
            var clazz = $(xml).find("operation").attr("class");
            clazz = clazz.substring(clazz.lastIndexOf('.') + 1);
            clazz = clazz.replace("Operation", "");
            
            var operationContainer = "<div id='operation-" + id + "' class='queue-operation'>" + clazz;
            var filename = $(xml).find("filepath").text();
            
            operationContainer += "<div class='queue-operation-parameters'>";
            
            if (clazz == "WriteFile")
            {
               if (filename != undefined && filename.length !== 0) {
                  operationContainer += filename;
               }
               
               var offset = $(xml).find("offset").text();
               var length = $(xml).find("maximumInputSize").text();
               if (offset != undefined && offset.length != 0) {
                  operationContainer += " (" + length + " bytes @ " + offset + ")";
               }
            }
            else if (clazz = "SetFileLength")
            {
               if (filename != undefined && filename.length !== 0) {
                  operationContainer += filename;
               }
               
               var length = $(xml).find("length").text();
               if (length != undefined && length.length != 0) {
                  operationContainer += " (to " + length + ")";
               }
            }
            else
            {
               if (filename != undefined && filename.length !== 0) {
                  operationContainer += "<div class='queue-operation-parameters'>" + filename + "</div>";
               }
            }
            
            operationContainer += "</div>";
            operationContainer += "</div>";
            return operationContainer;
            
         }
       
     </script>
     
   </head>
   
   <body>
      
      <table id="queues">
      
      </table>
   
   </body>
</html>